<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 标准写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="school"> <br> -->
			<!-- 双向数据绑定：<input type="text" v-model:value="school"> -->

			<!-- 简写方式 -->
			单向数据绑定：<input type="text" :value="school"> <br>
			双向数据绑定：<input type="text" v-model="school"> <br>
			<hr>

			<!-- 下面的写法是不对的，v-model只能用在表单元素上 -->
			<!-- <a v-model:href="url">点我去{{school}}学习</a> -->
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					school:'尚硅谷',
					url:'http://www.atguigu.com'
				}
			})
		</script>
	</body>
</html>